<div class="catalog-search" ng-class="{'mobile-shown': $ctrl.mobileSearchInputShown}">
  <button
     ng-if="$ctrl.toggleAtMobile"
     title="Catalog Search"
     class="catalog-search-toggle visible-xs-inline-block btn btn-link"
     ng-click="$ctrl.toggleMobileShowSearchInput()">
    <i class="fa fa-search" aria-hidden="true"></i>
    <span class="sr-only">Catalog Search</span>
  </button>
  <form role="form" class="landing-search-form search-pf has-button" ng-class="{'hidden-xs': $ctrl.toggleAtMobile}">
    <div class="form-group has-clear">
      <div class="search-pf-input-group">
        <label for="search-input" class="sr-only">Search Catalog</label>
        <span class="fa fa-search catalog-search-icon" aria-hidden="true" ng-click="$ctrl.setSearchInputFocus()"></span>
        <input
            id="search-input"
            type="search"
            autocomplete="off"
            ng-keypress="$ctrl.onKeyPress($event)"
            class="form-control catalog-search-input"
            placeholder="Search Catalog"
            ng-model="$ctrl.searchText"
            uib-typeahead="item.name for item in $ctrl.search($viewValue)"
            typeahead-on-select="$ctrl.itemSelected($item)"
            typeahead-focus-first="false"
            typeahead-template-url="catalog-search/catalog-search-result.html"
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false">
        <button
            type="button"
            ng-if="$ctrl.searchText"
            ng-click="$ctrl.searchText = ''"
            class="clear">
          <span class="sr-only">Clear Search Input</span>
          <span class="pficon pficon-close" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </form>
</div>
